import { Button, Drawer, Form, Input, message, Select } from 'antd'
import type { DictItem, userType } from '@/types'
import React, { useEffect, useState } from 'react'
import http from '@/utils/request'
import { queryRoleList, queryTeamList } from '../utils/getList'
import './index.scss'

const userDrawer: React.FC<{ isOpen: boolean, user?: userType, onClose: (val: boolean) => void }> = ({ isOpen, user, onClose }) => {
  const [form] = Form.useForm()
  const [loading, setLoading] = useState(false)
  const [roleList, setRoleList] = useState<DictItem[]>([])
  const [teamLst, setTeamLst] = useState<DictItem[]>([])

  useEffect(() => {
    form.resetFields()
    queryTeamList().then(res => {
      setTeamLst(res)
    })
    queryRoleList().then(res => {
      setRoleList(res)
    })
    console.log(user)
  }, [user])

  const handleOk = () => {
    form?.validateFields()
      .then((values) => {
        setLoading(true)
        const url = user?.id ? '/disp/sys/user/update' : '/disp/sys/user/insert'
        http.post(url, {
          ...values
        }).then(() => {
          message.success(`${user?.id ? '编辑' : '添加'}成功！`)
          onClose(true)
        }).catch(err => {
          message.error(err.msg || '操作失败')
        }).finally(() => {
          setLoading(false)
        })
      })
      .catch((errorInfo) => {
        console.log('校验失败:', errorInfo)
      })
  }
  const handleCancel = () => {
    onClose(false)
  }

  return (<Drawer
    title={`${user?.id ? '编辑' : '添加'}授权`}
    closable={false}
    width={600}
    open={isOpen}>
    <div className="drawer-container flex-column">
      <Form
        form={form}
        initialValues={user || {}}
        style={{ maxWidth: 600, marginTop: 20 }}
        layout="vertical">
        <Form.Item<userType>
          label="用户工号"
          name="userCode"
          rules={[{ required: true, message: '用户工号为空!' }]}
        >
          <Input
            allowClear
            disabled={!!(user?.id)}
            style={{ width: '100%' }}
          />
        </Form.Item>

        {
          user?.id ? null :
            <Form.Item<userType>
              label="用户密码"
              name="password"
              rules={[{ required: true, message: '用户密码为空!' }]}
            >
              <Input.Password
                allowClear
                style={{ width: '100%' }}
              />
            </Form.Item>
        }

        <Form.Item<userType>
          label="用户名称"
          name="username"
          rules={[{ required: true, message: '用户名称为空!' }]}
        >
          <Input
            allowClear
            style={{ width: '100%' }}
          />
        </Form.Item>

        <Form.Item<userType>
          label="角色"
          name="roleId"
          rules={[{ required: true, message: '角色为空!' }]}
        >
          <Select
            style={{ width: '100%' }}
            options={roleList}
          />
        </Form.Item>

        <Form.Item<userType>
          label="团队"
          name="teamId"
          rules={[{ required: false, message: '所属团队为空!' }]}
        >
          <Select
            style={{ width: '100%' }}
            options={teamLst}
          />
        </Form.Item>

        <Form.Item<userType>
          label="是否为邀约账号"
          name="invitationFlag"
          rules={[{ required: true, message: '请选择账号类型!' }]}
        >
          <Select
            style={{ width: '100%' }}
            options={[{
              value: 'Yes',
              label: '是'
            }, {
              value: 'No',
              label: '否'
            }]}
          />
        </Form.Item>

        <Form.Item<userType>
          label="备注"
          name="remark"
          rules={[{ required: false }]}
        >
          <Input
            allowClear
            style={{ width: '100%' }}
          />
        </Form.Item>
      </Form>
      <div className="flex1" />
      <div className="button-container flex-row">
        <div className="flex1" />
        <Button onClick={handleCancel} className="btn">取 消</Button>
        <Button onClick={handleOk} loading={loading} className="btn" type="primary">保 存</Button>
      </div>
    </div>
  </Drawer>)
}

export default userDrawer
